<template>
  <div>
    <el-table
      :data="tableData"
      border
      empty-text="暂无数据"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="所属公司：">
              <span>{{ props.row.companyName }}</span>
            </el-form-item>
            <el-form-item label="所在省份：">
              <span v-if="props.row.region">{{ props.row.region.split(',')[0] }}</span>
            </el-form-item>
            <el-form-item label="所在城市：">
              <span v-if="props.row.region">{{ props.row.region.split(',')[1] }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="真实姓名"
        property="employeeName"
        width="100">
      </el-table-column>
      <el-table-column
        label="手机号"
        property="telphone"
        width="120">
      </el-table-column>
      <el-table-column
        label="所属行业"
        property="industry"
        width="120">
      </el-table-column>
      <el-table-column
        label="认证类型"
        property="authTypeName"
        width="120">
      </el-table-column>
      <!--<el-table-column-->
              <!--label="身份证正面"-->
              <!--width="120">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button-->
                  <!--size="mini"-->
                  <!--@click="viewIdCard(scope.row.idCards[0])">查看-->
          <!--</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
              <!--label="身份证反面"-->
              <!--width="120">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button-->
                  <!--size="mini"-->
                  <!--@click="viewIdCard(scope.row.idCards[1])">查看-->
          <!--</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column
        label="行驶证"
        width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="viewDrivingLience(scope.row.drivingLience)">查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="驾驶证"
        width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="viewDriverLience(scope.row.driverLience)">查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="申请时间"
        property="createdTime"
        width="200">
      </el-table-column>
      <el-table-column
        label="审批状态"
        width="150">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.auditStatus=='通过'">{{scope.row.auditStatus}}</el-tag>
          <el-tag type="danger" v-else-if="scope.row.auditStatus=='拒绝'">{{scope.row.auditStatus}}</el-tag>
          <el-tag type="info" v-else-if="scope.row.auditStatus=='驳回修改'">{{scope.row.auditStatus}}</el-tag>
          <el-tag type="warning" v-else-if="scope.row.auditStatus=='待完善'">{{scope.row.auditStatus}}</el-tag>
          <el-tag v-else="scope.row.auditStatus=='待审核'">{{scope.row.auditStatus}}</el-tag>
        </template>
      </el-table-column>
      <!--<el-table-column-->
        <!--label="审批人"-->
        <!--property="auditBy"-->
        <!--width="160">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--label="审批时间"-->
        <!--property="auditTime"-->
        <!--width="150">-->
      <!--</el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-view"
            @click="viewData(scope.$index, scope.row)">查看
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-check"
            v-if="scope.row.auditStatus=='拒绝' && scope.row.applyAgained=='0' && p1"
            @click="handleApplyAgained(scope.$index, scope.row,'1')">允许再次申请
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-close"
            v-if="scope.row.auditStatus=='拒绝' && scope.row.applyAgained=='1' && p1"
            @click="handleApplyAgained(scope.$index, scope.row,'0')">拒绝再次申请
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="救援司机认证信息" :visible.sync="dialogFormVisible" top="10vh" width="70%">
      <div style="height:400px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">真实姓名</el-col>
          <el-col :span="8" class="m-col-left">{{formData.employeeName}}</el-col>
          <el-col :span="4" class="m-col-left">手机号</el-col>
          <el-col :span="8" class="m-col-left">{{formData.telphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">性别</el-col>
          <el-col :span="8" class="m-col-left">{{formData.gender?"":(formData.gender==='male'?"男":"女")}}</el-col>
          <el-col :span="4" class="m-col-left">是否车主</el-col>
          <el-col :span="8" class="m-col-left">{{formData.hasCar?"":(formData.hasCar==='N'?"否":"是")}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">紧急联系人</el-col>
          <el-col :span="8" class="m-col-left">{{formData.emergencyName||''}}</el-col>
          <el-col :span="4" class="m-col-left">紧急联系电话</el-col>
          <el-col :span="8" class="m-col-left">{{formData.emergencyPhone||""}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">准确收件地址</el-col>
          <el-col :span="20" class="m-col-left">{{formData.address}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">所属行业</el-col>
          <el-col :span="8" class="m-col-left">{{formData.industry}}</el-col>
          <el-col :span="4" class="m-col-left">认证类型</el-col>
          <el-col :span="8" class="m-col-left">{{formData.authTypeName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">所属公司</el-col>
          <el-col :span="8" class="m-col-left">{{formData.companyName}}</el-col>
          <el-col :span="4" class="m-col-left">所属省份</el-col>
          <el-col :span="8" class="m-col-left">{{formData.region && formData.region.split(',')[0]}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">车牌号</el-col>
          <el-col :span="20" class="m-col-left">{{formData.companyEmployeeCarNum}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">所属城市</el-col>
          <el-col :span="8" class="m-col-left">{{formData.region && formData.region.split(',')[1]}}</el-col>
          <el-col :span="4" class="m-col-left">申请时间</el-col>
          <el-col :span="8" class="m-col-left">{{formData.createdTime}}</el-col>
        </el-row>
        <!--<el-row>-->
          <!--<el-col :span="4" class="m-col">审批人</el-col>-->
          <!--<el-col :span="8" class="m-col-left">{{formData.auditBy}}</el-col>-->
          <!--<el-col :span="4" class="m-col-left">审批时间</el-col>-->
          <!--<el-col :span="8" class="m-col-left">{{formData.auditTime}}</el-col>-->
        <!--</el-row>-->
        <el-row>
          <el-col :span="4" class="m_col_normal">审批状态</el-col>
          <el-col :span="8" class="m_col_normal">{{formData.auditStatus}}
          </el-col>
          <el-col :span="4" class="m_col_normal">审批描述</el-col>
          <el-col :span="8" class="m_col_normal">
            {{formData.auditDesc}}
          </el-col>
        </el-row>
        <el-row v-if="formData.idCards&&formData.idCards.length===2">
          <el-col :span="4" class="m-col-bottom" style="border-top: 1px solid #ebeef5;">身份证</el-col>
          <el-col :span="20" class="m-col-bottom-left" style="border-top: 1px solid #ebeef5;">
            <div v-if="formData.idCards&&formData.idCards.length===2">
              <div style="width: 100px;height: 100px" @click="showImg(formData.idCards[0].url)">
                <img :src="formData.idCards[0]==null?'':baseUrl+formData.idCards[0].url"
                     style="width:100%;height:100%"></img>
              </div>
              <div style="width: 100px;height: 100px" @click="showImg(formData.idCards[1].url)">
                <img :src="formData.idCards[1]==null?'':baseUrl+formData.idCards[1].url"
                     style="width:100%;height:100%"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="formData.drivingLience!=null">
          <el-col :span="4" class="m-col-bottom" style="border-top: 1px solid #ebeef5;">行驶证</el-col>
          <el-col :span="20" class="m-col-bottom-left" style="border-top: 1px solid #ebeef5;">
            <div v-if="formData.drivingLience!=null">
              <div style="width: 100px;height: 100px" @click="showImg(formData.drivingLience.url)">
                <img :src="formData.drivingLience==null?'':baseUrl+formData.drivingLience.url"
                     style="width:100%;height:100%"></img>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="formData.driverLience!=null">
          <el-col :span="4" class="m-col-bottom">驾驶证</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div style="margin-top: 25px" v-if="formData.driverLience!=null">
              <div style="width: 100px;height: 100px" @click="showImg(formData.driverLience.url)">
                <img :src="formData.driverLience==null?'':baseUrl+formData.driverLience.url"
                     style="width:100%;height:100%"></img>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="viewIndustry" :loading="loading">通过</el-button>
        <el-button type="primary" @click="editRejectUpdate" :loading="loading">驳回修改</el-button>
        <el-button type="danger" @click="editReject" :loading="loading">拒绝</el-button>
      </div>
    </el-dialog>
    <el-dialog title="行驶证" :visible.sync="dialogDrivingLienceFormVisible" top="10vh">
      <div style="text-align: center">
        <img :src="baseUrl+drivingLience.url" v-if="drivingLience!=null" style="width:80%;height: auto">
        <span v-else>无图片</span>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="驾驶证" :visible.sync="dialogDriverLienceFormVisible" top="10vh">
      <div style="text-align: center">
        <img :src="baseUrl+driverLience.url" v-if="driverLience!=null" style="width:80%;height: auto">
        <span v-else>无图片</span>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div style="text-align: center">
        <img :src="baseUrl+imgUrl" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="审批意见" :visible.sync="dialogAuditFormVisible" top="10vh">
      <el-form :model="auditData" :rules="rules" ref="ruleForm">
        <el-form-item label="意见" label-width="50px" prop="auditDesc">
          <el-input type="textarea" v-model="auditData.auditDesc" auto-complete="off" :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAuditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRejectUpdate" :loading="loading">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="拒绝原因" :visible.sync="dialogRejectFormVisible" top="10vh">
      <el-form :model="auditData" :rules="rules" ref="ruleForm">
        <el-form-item label="原因" label-width="50px" prop="auditDesc">
          <el-input type="textarea" v-model="auditData.auditDesc" auto-complete="off" :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRejectFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleReject" :loading="loading">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="所属行业" :visible.sync="dialogIndustryVisible" top="10vh">
      <el-form :model="auditData" :rules="rules" ref="ruleForm">
        <el-form-item label="所属行业" label-width="100px" prop="auditDesc">
          <el-select v-model="auditData.industryIds" placeholder="请选择" style="width:200px" clearable>
            <el-option
              v-for="item in industryList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogIndustryVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSuccess" :loading="loading">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }
  .m_col_normal{
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    border-top: none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-top: none;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
  }
</style>

<script>
  import rescueEmployeeApi from '@/api/rescueEmployeeApi'
  import industryApi from '@/api/industryApi'

  export default {
    created() {
      this.p1 = this.permissionValid.validAction(this.permissionValid.permissionRule.rescueEmployee.againApplyRescueCompanyDriver)

      industryApi.listAll((res) => {
        this.industryList = res
      },() =>{})
      this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
    },
    props: {
      defaultCurrentPage: {type: Number},
      defaultPageSize: {type: Number},
      defaultTableSearchParam: {type: Object}
    },
    data() {
      return {
        baseUrl: process.env.IMG_BASE_URL,
        p1: false,
        dialogRejectFormVisible: false,
        dialogImgFormVisible: false,
        imgUrl: '',
        dialogDrivingLienceFormVisible: false,
        dialogDriverLienceFormVisible: false,
        dialogIndustryVisible: false,
        driverLience: null,
        drivingLience: null,
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '70px',
        formData: {
          companyName: '',
          employeeName: '',
          telphone: '',
          region: '',
          address: '',
          driverLience: {},
          drivingLience: {}

        },
        industryList: [],
        loading: false,
        actionType: '',
        multipleSelection: [],
        rules: {
          auditDesc: [
            {required: true, message: '请输入意见', trigger: 'blur'}
          ]
        },
        dialogAuditFormVisible: false,
        auditData: {
          auditStatus: '',
          auditDesc: '',
          industryIds: ''
        }
      }
    },
    methods: {
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
      listTableData(tableSearchParam, currentPage, pageSize) {
        rescueEmployeeApi.listAuditDriver(tableSearchParam, currentPage, pageSize, (res) => {
          console.log({"res":res});
          this.tableData = res.list
          this.$emit('total', res.total)
        }, () => {
        })
      },
      viewData(index, row) {
        //清空历史值
        this.formData = {
          companyName: '',
          employeeName: '',
          telphone: '',
          region: '',
          drivingLience: {},
          driverLience: {},
          address: ''
        }
        for (var t of this.tableData) {
          if (t.id == row.id) {
            this.auditData.id = t.id
            this.auditData.industryIds = (Array.isArray(t.industryIds) && t.industryIds.length > 0) ? t.industryIds[0] : t.industryIds
            this.formData = t
            break
          }
        }
        this.dialogFormVisible = true
      },
      viewDrivingLience(o) {
        this.drivingLience = o
        this.dialogDrivingLienceFormVisible = true
      },
      viewIdCard(item){
        if(item){
          this.showImg(item.url);
        }
      },
      viewDriverLience(o) {
        this.driverLience = o
        this.dialogDriverLienceFormVisible = true
      },
      viewIndustry() {
        this.dialogIndustryVisible = true
      },
      handleSuccess() {
        this.auditData.auditStatus = '2'
        this.auditData.auditDesc = ''
        this.loading = true
        rescueEmployeeApi.auditRescueCompanyDriver(this.auditData.id, {
          ...this.auditData,
          industryIds: Array.isArray(this.auditData.industryIds) ? this.auditData.industryIds : [this.auditData.industryIds]
        }, (res) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.dialogFormVisible = false
          this.dialogIndustryVisible = false
          this.loading = false
          this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
        }, () => {
          this.loading = false
        })
      },
      editRejectUpdate() {
        this.auditData.auditDesc = ''
        this.dialogAuditFormVisible = true
      },
      handleRejectUpdate() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.auditData.auditStatus = '1'
            this.loading = true
            rescueEmployeeApi.auditRescueCompanyDriver(this.auditData.id, this.auditData, (res) => {
              this.loading = false
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.dialogAuditFormVisible = false
              this.dialogFormVisible = false
              this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
            }, () => {
              this.loading = false
            })
          }
        })
      },
      editReject() {
        this.auditData.auditDesc = ''
        this.dialogRejectFormVisible = true
      },
      handleReject() {
        this.auditData.applyAgained = '0'
        this.auditData.auditStatus = '3'
        this.loading = true
        rescueEmployeeApi.auditRescueCompanyDriver(this.auditData.id, this.auditData, (res) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.loading = false
          this.dialogFormVisible = false
          this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
          this.dialogRejectFormVisible = false
        }, () => {
          this.loading = false
        })
      },

      handleApplyAgained(index, row, status) {
        this.auditData.applyAgained = '1'
        this.loading = true
        rescueEmployeeApi.againApplyRescueCompanyDriver(row.id, status, (res) => {
          this.loading = false
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.listTableData(this.defaultTableSearchParam, this.defaultCurrentPage, this.defaultPageSize)
        }, () => {
          this.loading = false
        })
      },
    }
  }
</script>
